<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅游景点</title>
    <script src="js/jquery-3.7.1.min.js"></script>
    <style>
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        #attractionPreview {
            margin: 20px auto;
            width: 100%;
            height: 700px;

            .right_child {
                margin-left: 1%;
                width: 37%;
                height: 700px;
                overflow: scroll;
                background-color: white;

                ul {
                    padding-left: 0;
                }

                li {
                    height: 100px;
                    border-top: 2px solid #dddddd;

                    &:hover {
                        cursor: pointer;
                    }
                }

                img {
                    float: left;
                    margin: 10px 10px;
                    width: 8vw;
                    height: 10vh;
                }

                div[class="left"] {
                    color: black;
                    margin: 10px 10px;
                    line-height: 25px;

                    span {
                        /* font-size: 14px; */
                        font-weight: bold;
                    }
                }

                div[class="right"] {
                    color: #ff6600;
                    line-height: 90px;
                    margin-right: 10px;

                    span {
                        font-size: 30px;
                        font-weight: bold;
                    }
                }
            }
        }
    </style>
</head>

<body>
    <div id="new_header">
        <script>
            $("#new_header").load("header.html");
        </script>
    </div>

    <!-- 正文部分 -->
    <div id="main">
        <!-- 旅游景点部分 -->
        <div id="attractionPreview">
            <div id="new_left_child">
                <script>
                    $("#new_left_child").load("attraction_left_child.html");
                </script>
            </div>
            <div class="right_child common">
                <ul id="unordered_attraction_list">
                    <!-- <li>
                        <a href="attraction_detail.html?id=1">
                            <img src="imgs/yiheyuan.png" class='left'>
                            <div class='left'><span>颐和园</span> <br>景点地址：<br>开放时间：</div>
                            <div class='right'>门票:￥<span></span>起</div>
                        </a>
                    </li> -->
                </ul>
            </div>
        </div>
    </div>
    <script>
        $.getJSON(
            'UserServlet',
            {methodName: "getAttractionList"},
            function (result){
                for(var i=0; i<result.length; i++){
                    var $newli = $("<li></li>");
                    var $new_a = $("<a href='attraction_detail.html?id="+result[i].id+"'></a>");
                    $new_a.append($("<img src='"+result[i].pictureUrl+"' class='left'>"));
                    $new_a.append($("<div class='left'><span>"+result[i].name+
                        "</span> <br>景点地址："+result[i].address+" <br>开放时间："
                        +result[i].openingHours+"</div>"));
                    $new_a.append($("<div class='right'>门票:￥<span>"+result[i].price+"</span>起</div>"));
                    $newli.append($new_a);
                    $("#unordered_attraction_list").append($newli);
                }
            }
        );
    </script>
</body>

</html>